<template>
  <div class='choice-container'>
    <div class="app-container">
      <!-- 卡片题库 -->
      <el-card class="question-bank">

        <!-- 顶部说明及新增题库按钮 -->
        <div class="btn-wrapper">
          <span class="suggestion">说明：目前支持学科和关键字条件筛选</span>
          <el-button style="float: right; padding: 9px 15px; font-size: 12px;" type="success" icon="el-icon-edit" @click="addQuestions">新增试题</el-button>
        </div>
        <!-- 顶部说明及新增题库按钮/ -->
        <!-- 筛选区域 -->
        <!-- form表单 -->
        <el-form label-position="right" label-width="80px" :model="formData" ref="formDataRef" class="demo-form-inline">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科" size="small" prop="subjectID">
                <!-- 点击学科列表后才可以得到二级的分类的数据 -->
                <el-select v-model="formData.subjectID" @change="getSecondSubjectList" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录" size="small" prop="catalogID">
                <el-select v-model="formData.catalogID" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in secondList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签" size="small" props="tags">
                <el-select v-model="formData.tags" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in tagsList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字" size="small" prop="keyword">
                <el-input v-model="formData.keyword" placeholder="根据题干搜索"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试题类型" size="small" prop="questionType">
                <el-select v-model="formData.questionType" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in questionTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度" size="small" prop="difficulty">
                <el-select v-model="formData.difficulty" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in difficultyList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向" size="small" prop="direction">
                <el-select v-model="formData.direction" placeholder="请选择" style="width: 100%">
                  <el-option  v-for="(item, i) in direction" :key="i" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人" size="small" prop="creatorID">
                <el-select v-model="formData.creatorID" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in usersList" :key="item.id" :label="item.username" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="题目备注" size="small" prop="remarks">
                <el-input v-model="formData.remarks" placeholder="请输入题目备注"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称" size="small" prop="shortName" >
                <el-input v-model="formData.shortName" placeholder="请输入企业简称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市" size="small" prop="province">
                <el-select v-model="formData.province" @change="getCityhandle" placeholder="请选择" style="width: 48%; margin-right: 2%;" size="small">
                  <el-option  v-for="(item, i) in provincesList" :key="i" :label="item" :value="item"></el-option>
                </el-select>
                <el-select ref="citySelectRef" v-model="formData.city" size="small" placeholder="请选择" style="width: 50%" >
                  <el-option v-for="(item, i) in cityList" :key="i" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="text-align: right;">
                <el-button size="small" @click="clearData"> 清除</el-button>
                <el-button type="primary" size="small" @click="searchData">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- form表单/ -->
        <!-- 筛选区域 /-->

        <!-- tabs标签页 -->
        <el-tabs v-model="activeName" type="card" >
          <!-- 全部tabs切换栏 -->
          <el-tab-pane label="全部" name="all" >
            <!-- alert 信息提示栏 -->
            <el-alert
           v-if="alertText !== ''"
           :title="alertText"
           type="info"
           show-icon
           style="margin-bottom: 15px"
           >
            </el-alert>
            <!-- alert 信息提示栏/ -->

            <!-- 固定列表格 -->
            <el-table
          :data="allTableData"
          style="width: 100%"
          >
          <el-table-column label="试题编号" width="120" prop="number">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            width="120">
          </el-table-column>
          <el-table-column
            prop="catalog"
            label="目录"
            width="120">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType === '1'">单选</span>
              <span v-else-if="scope.row.questionType === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column
            label="题干"
            width="280"
            >
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column
            label="录入时间"
            width="180">
             <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="难度"
            width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty === '1'">简单</span>
              <span v-else-if="scope.row.difficulty === '2'">一般</span>
              <span v-else>困难</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="creator"
            label="录入人"
            width="120">
          </el-table-column>
           <el-table-column
            label="审核状态"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.chkState === 1">已审核</span>
              <span v-else-if="scope.row.chkState === 2">已拒绝</span>
              <span v-else>待审核</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="chkRemarks"
            label="审核意见"
            width="150">
          </el-table-column>
          <el-table-column
            prop="chkUser"
            label="审核人"
            width="120">
          </el-table-column>
          <el-table-column
            label="发布状态"
            width="180">
             <template slot-scope="scope">
              <span v-if="scope.row.publishState === 1">已发布</span>
              <span v-else-if="scope.row.publishState === 2">待发布</span>
              <span v-else>已下架</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="operate"
            label="操作"
            fixed="right"
            align="center"
            width="200">
              <template slot-scope="scope">
                <el-button @click="previewhandleClick(scope.row)" type="text" size="small">预览</el-button>
                <el-button type="text" size="small" :disabled="scope.row.chkState === 0 ? false : true" @click="checkHandleClick(scope.row)">审核</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true" @click="modifyHandleClick(scope.row)">修改</el-button>
                <el-button type="text" size="small" @click="cancelHandleClick(scope.row)">{{ scope.row.publishState === 0 ?  '上架' : '下架'}}</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true" @click="deleteTestHandle(scope.row)">删除</el-button>
              </template>
          </el-table-column>
            </el-table>
            <!-- 固定列表格/ -->

            <!-- 分页 -->
            <div class="pagination" style="margin-top: 20px; text-align: right;">
              <div class="pages">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="Number(requestParameters.page)"
                  :total="Number(total)"
                  :page-size="Number(requestParameters.pagesize)"
                  :page-sizes="[5,10,20,50]"
                  layout=" prev, pager, next, sizes, jumper"
                ></el-pagination>
              </div>
            </div>
            <!-- 分页/ -->
           
          </el-tab-pane>
          <!-- 全部tabs切换栏/ -->

          <!-- 待审核tabs切换栏 -->
          <el-tab-pane label="待审核" name="wait">
            <!-- alert 信息提示栏 -->
            <el-alert
           type="info"
           show-icon
           style="margin-bottom: 15px"
           >
            <template slot="title">
              <span>数据一共{{ this.waitTableData.length }}条</span>
            </template>
            </el-alert>
            <!-- alert 信息提示栏/ -->

            <!-- 固定列表格 -->
            <el-table
          :data="waitTableData"
          style="width: 100%"
          >
          <el-table-column label="试题编号" width="120" prop="number">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            width="120">
          </el-table-column>
          <el-table-column
            prop="catalog"
            label="目录"
            width="120">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType === '1'">单选</span>
              <span v-else-if="scope.row.questionType === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column
            label="题干"
            width="280"
            >
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column
            label="录入时间"
            width="180">
             <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="难度"
            width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty === '1'">简单</span>
              <span v-else-if="scope.row.difficulty === '2'">一般</span>
              <span v-else>困难</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="creator"
            label="录入人"
            width="120">
          </el-table-column>
           <el-table-column
            label="审核状态"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.chkState === 1">已审核</span>
              <span v-else-if="scope.row.chkState === 2">已拒绝</span>
              <span v-else>待审核</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="chkRemarks"
            label="审核意见"
            width="150">
          </el-table-column>
          <el-table-column
            prop="chkUser"
            label="审核人"
            width="120">
          </el-table-column>
          <el-table-column
            label="发布状态"
            width="180">
             <template slot-scope="scope">
              <span v-if="scope.row.publishState === 1">已发布</span>
              <span v-else-if="scope.row.publishState === 2">待发布</span>
              <span v-else>已下架</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="operate"
            label="操作"
            fixed="right"
            align="center"
            width="200">
              <template slot-scope="scope">
                <el-button @click="previewhandleClick(scope.row)" type="text" size="small">预览</el-button>
                <el-button type="text" size="small" :disabled="scope.row.chkState === 0 ? false : true" @click="checkHandleClick(scope.row)">审核</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true" @click="modifyHandleClick(scope.row)">修改</el-button>
                <el-button type="text" size="small" @click="cancelHandleClick(scope.row)">{{ scope.row.publishState === 0 ?  '上架' : '下架'}}</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true" @click="deleteTestHandle(scope.row)">删除</el-button>
              </template>
          </el-table-column>
            </el-table>
            <!-- 固定列表格/ -->
             <!-- 分页 -->
            <div class="pagination" style="margin-top: 20px; text-align: right;">
              <div class="pages">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="Number(requestParameters.page)"
                  :total="Number(total)"
                  :page-size="Number(requestParameters.pagesize)"
                  :page-sizes="[5,10,20,50]"
                  layout=" prev, pager, next, sizes, jumper"
                ></el-pagination>
              </div>
            </div>
            <!-- 分页/ -->
          </el-tab-pane>
          <!-- 待审核tabs切换栏/ -->

          <!-- 已审核tabs切换栏 -->
          <el-tab-pane label="已审核" name="check">
             <!-- alert 信息提示栏 -->
            <el-alert
           type="info"
           show-icon
           style="margin-bottom: 15px"
           >
           <template slot="title">
              <span>数据一共{{ this.alreadyTableData.length }}条</span>
            </template>
            </el-alert>
            <!-- alert 信息提示栏/ -->

            <!-- 固定列表格 -->
            <el-table
          :data="alreadyTableData"
          style="width: 100%"
          >
                    <el-table-column label="试题编号" width="120" prop="number">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            width="120">
          </el-table-column>
          <el-table-column
            prop="catalog"
            label="目录"
            width="120">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType === '1'">单选</span>
              <span v-else-if="scope.row.questionType === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column
            label="题干"
            width="280"
            >
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column
            label="录入时间"
            width="180">
             <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="难度"
            width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty === '1'">简单</span>
              <span v-else-if="scope.row.difficulty === '2'">一般</span>
              <span v-else>困难</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="creator"
            label="录入人"
            width="120">
          </el-table-column>
           <el-table-column
            label="审核状态"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.chkState === 1">已审核</span>
              <span v-else-if="scope.row.chkState === 2">已拒绝</span>
              <span v-else>待审核</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="chkRemarks"
            label="审核意见"
            width="150">
          </el-table-column>
          <el-table-column
            prop="chkUser"
            label="审核人"
            width="120">
          </el-table-column>
          <el-table-column
            label="发布状态"
            width="180">
             <template slot-scope="scope">
              <span v-if="scope.row.publishState === 1">已发布</span>
              <span v-else-if="scope.row.publishState === 2">待发布</span>
              <span v-else>已下架</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="operate"
            label="操作"
            fixed="right"
            align="center"
            width="200">
              <template slot-scope="scope">
                <el-button @click="previewhandleClick(scope.row)" type="text" size="small">预览</el-button>
                <el-button type="text" size="small" :disabled="scope.row.chkState === 0 ? false : true" @click="checkHandleClick(scope.row)">审核</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true" @click="modifyHandleClick(scope.row)">修改</el-button>
                <el-button type="text" size="small" @click="cancelHandleClick(scope.row)">{{ scope.row.publishState === 0 ?  '上架' : '下架'}}</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true" @click="deleteTestHandle(scope.row)">删除</el-button>
              </template>
          </el-table-column>
            </el-table>
            <!-- 固定列表格/ -->
             <!-- 分页 -->
            <div class="pagination" style="margin-top: 20px; text-align: right;">
              <div class="pages">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="Number(requestParameters.page)"
                  :total="Number(total)"
                  :page-size="Number(requestParameters.pagesize)"
                  :page-sizes="[5,10,20,50]"
                  layout=" prev, pager, next, sizes, jumper"
                ></el-pagination>
              </div>
            </div>
            <!-- 分页/ -->
          </el-tab-pane>
          <!-- 已审核tabs切换栏/ -->

          <!-- 已拒绝tabs切换兰 -->
          <el-tab-pane label="已拒绝" name="reject">
             <!-- alert 信息提示栏 -->
            <el-alert
           type="info"
           show-icon
           style="margin-bottom: 15px"
           >
           <template slot="title">
              <span>数据一共{{ this.alreadyTableData.length }}条</span>
            </template>
            </el-alert>
            <!-- alert 信息提示栏/ -->

            <!-- 固定列表格 -->
            <el-table
          :data="refuseTableData"
          style="width: 100%"
          >
                    <el-table-column label="试题编号" width="120" prop="number">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            width="120">
          </el-table-column>
          <el-table-column
            prop="catalog"
            label="目录"
            width="120">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType === '1'">单选</span>
              <span v-else-if="scope.row.questionType === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column
            label="题干"
            width="280"
            >
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column
            label="录入时间"
            width="180">
             <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="难度"
            width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty === '1'">简单</span>
              <span v-else-if="scope.row.difficulty === '2'">一般</span>
              <span v-else>困难</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="creator"
            label="录入人"
            width="120">
          </el-table-column>
           <el-table-column
            label="审核状态"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.chkState === 1">已审核</span>
              <span v-else-if="scope.row.chkState === 2">已拒绝</span>
              <span v-else>待审核</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="chkRemarks"
            label="审核意见"
            width="150">
          </el-table-column>
          <el-table-column
            prop="chkUser"
            label="审核人"
            width="120">
          </el-table-column>
          <el-table-column
            label="发布状态"
            width="180">
             <template slot-scope="scope">
              <span v-if="scope.row.publishState === 1">已发布</span>
              <span v-else-if="scope.row.publishState === 2">待发布</span>
              <span v-else>已下架</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="operate"
            label="操作"
            fixed="right"
            align="center"
            width="200">
              <template slot-scope="scope">
                <el-button @click="previewhandleClick(scope.row)" type="text" size="small">预览</el-button>
                <el-button type="text" size="small" :disabled="scope.row.chkState === 0 ? false : true" @click="checkHandleClick(scope.row)">审核</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true" @click="modifyHandleClick(scope.row)">修改</el-button>
                <el-button type="text" size="small" @click="cancelHandleClick(scope.row)">{{ scope.row.publishState === 0 ?  '上架' : '下架'}}</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true" @click="deleteTestHandle(scope.row)">删除</el-button>
              </template>
          </el-table-column>
            </el-table>
            <!-- 固定列表格/ -->
             <!-- 分页 -->
            <div class="pagination" style="margin-top: 20px; text-align: right;">
              <div class="pages">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="Number(requestParameters.page)"
                  :total="Number(total)"
                  :page-size="Number(requestParameters.pagesize)"
                  :page-sizes="[5,10,20,50]"
                  layout=" prev, pager, next, sizes, jumper"
                ></el-pagination>
              </div>
            </div>
            <!-- 分页/ -->
          </el-tab-pane>
          <!-- 已拒绝tabs切换栏/ -->
        </el-tabs>
        <!-- tabs标签页/ -->
      </el-card>
      <!-- 题目预览对话框 -->
      <el-dialog
        title="题目预览"
        v-if="testPreviewVisible"
        :visible.sync="testPreviewVisible">
        <test-preview :testPreviewDate="testPreviewDate"></test-preview>
        <template slot="footer">
          <el-button type="primary" @click="testPreviewVisible = false">关闭</el-button>
        </template>
      </el-dialog>
      <!-- 题目预览对话框/ -->
      <!-- 题目审核对话框 -->
      <el-dialog
        title="题目审核"
        v-show="checkDialogVisible"
        :visible.sync="checkDialogVisible"
        width="26%"
        >
        <questions-check @closeDialog="checkDialogVisible = false" :questionCheckDate="questionCheckDate"
        @updateList="getChoiceList()"></questions-check>
      </el-dialog>
      <!-- 题目审核对话框/ -->
    </div>
  </div>
</template>

<script>
// 导入精选题库请求接口/导入精选题库删除数据接口
import { choice, remove } from '@/api/hmmm/questions'
// 导入获取学科列表的数据接口
import { simple, detail} from '@/api/hmmm/subjects'
// 导入获取二级目录列表的数据接口
import { simpleDir } from '@/api/hmmm/directorys'
// 导入获取标签目录列表的请求接口
import { simpleTags } from '@/api/hmmm/tags'
// 导入获取管理员用户列表请求接口
import { simpleList } from '@/api/base/users'
// 导入城市信息固定数据源
import { provinces, citys } from '@/api/hmmm/citys'
// 导入难度、题型、方向数据源
import { difficultyList, questionTypeList, direction } from '@/api/hmmm/constants'
// 导入试题预览组件模块
import TestPreview from '../components/questions-preview'
// 导入精选题库上下架数据接口
import { choicePublish } from '@/api/hmmm/questions'
// 导入试题审核组件模块
import QuestionsCheck from '../components/questions-check.vue'
export default {
  name: 'QuestionsChoice',
  components: {
    // 试题预览组件的注册
    TestPreview,
    // 试题审核组件的注册
    QuestionsCheck
  },
  data () {
    return {
      // 筛选区域表单数据列表
      formData: {
        // 学科选中项
        subjectID: '',
        // 二级目录选中项
        catalogID: '',
        // 标签选中项
        tags: '',
        // 关键字
        keyword: '',
        // 试题类型
        questionType: '',
        // 难度
        difficulty: '',
        // 方向
        direction: '',
        // 录入人
        creatorID: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 企业所在省份
        province: '',
        // 企业所在城市
        city: ''
      },
      activeName: 'all',
      // 全部数据列表
      allTableData: [],
      // 待审核数据列表
      waitTableData: [],
      // 已审核数据列表
      alreadyTableData: [],
      // 已拒绝数据列表
      refuseTableData: [],
      // 请求页码数
      requestParameters: {
        page: 1,
        pagesize: 5
      },
      // 总条数
      total: null,
      // 信息提示条数
      alertText: '',
      // 数据条数
      counts: null,
      // 学科列表
      subjectList: [],
      // 二级目录列表
      secondList: [],
      // 标签目录列表
      tagsList: [],
      // 困难程度列表
      difficultyList: [],
      // 题型列别
      questionTypeList: [],
      // 方向列表
      direction: [],
      // 录入人列表
      usersList: [],
      // 省份信息列表
      provincesList: [],
      // 城市信息列表
      cityList: [],
      // 试题预览的显示与隐藏
      testPreviewVisible: false,
      // 当前试题预览数据
      testPreviewDate: {},
      // 精选题库审核状态列表
      chkType: [],
      // 精选题库试题发布状态
      publishType: [],
      // 题目审核弹框的显示与隐藏
      checkDialogVisible: false,
      // 当前试题审核数据
      questionCheckDate: {}
    }
  },
  created () {
    // 页面一加载就获取初始数据
    this.initialDate()
  },
  methods: {
    // 初始数据
    initialDate () {
      // 读取数据
      this.getChoiceList()
      this.getSubjectList()
      this.getfixedData()
      this.getUsersList()
    },
    // 渲染tabs页面
    async getChoiceList (data) {
      const { data: res } = await choice (this.requestParameters)
      // console.log(res)
      // 将获取到的数据传递给allTableData数组
      this.allTableData = res.items
      // 获取总数据条数
      this.total = res.counts
      // 获取提示条数
      this.alertText = `数据一共 ${this.total} 条`
      // 判断审核状态获取数据
      // console.log(res.items)
      res.items.forEach(item => {
        if (item.chkState === 1) {
          return this.alreadyTableData.push(item)
        } else if (item.chkState === 2) {
          return this.refuseTableData.push(item)
        } else {
          return this.waitTableData.push(item)
        }
      })

    },
    // 点击新增试题按钮跳转试题录入页面
    addQuestions () {
      this.$router.push('new')
    },
    // 获取学科列表数据
    async getSubjectList () {
      try {
        const { data } = await simple()
        // console.log(data)
        this.subjectList = data
      } catch (err) {
        this.$message.error('获取数据失败，请稍后重试！')
      }
    },
    // 获取二级分类列表--默认无选项数据
    async getSecondSubjectList () {
      // 拿到二级分类数据的id值
      const { data : dataDir } = await simpleDir({
        subjectID: this.formData.subjectID
      })
      const { data: dataTags } = await simpleTags({
        subjectID: this.formData.subjectID
      })
      this.secondList = dataDir
      this.tagsList = dataTags
    },
    // 获取标签级联选择器内的label值赋值给查询参数
    tagesSelecthandle () {
      this.$nextTick(function () {
        const tags = this.$refs.tagesSelectRef.selectedLabel
        this.queryCriteriaFormData.tags = tags
      })
    },
     // 获取难度，题型，方向数据固定数据源
    getfixedData () {
      this.difficultyList = difficultyList,
      this.questionTypeList = questionTypeList,
      this.direction = direction
      this.provincesList = provinces()
    },
     // 获取录入人用户列表信息
    async getUsersList () {
      try {
        const { data } = await simpleList()
        this.usersList = data
      } catch (err) {
        this.$message.error('数据异常，请稍后重试！')
      }
    },
    // 根据省份获取城市列表
    getCityhandle(value) {
      try {
        this.cityList = citys(value)
      } catch (err) {
        this.$message.error('城市信息异常，请稍后重试！')
      }
    },
    // 清除数据
    clearData () {
      // 清空所有之前输入或选择的筛选数据项
      // 让表单置空--对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.$refs.formDataRef.resetFields()
      // 城市未置空，将其单独置空
      this.formData.city = ''
      // 将标签置空
      this.formData.tags = ''
      // 即让页面重新渲染
      this.getChoiceList()
    },
    // 搜索数据的实现
    async searchData () {
      // 点击筛选按钮，根据输入或选择的筛选条件，查询第一页精选题库且渲染列表
      // 将所有数据都存放到同一个对象当中
      const { data } = await choice({
        ...this.formData,
        ...this.requestParameters
      })
      // 打印出对象的数据
      console.log(data)
      this.total = data.counts
      this.allTableData = data.items
    },
    // 试题预览功能
    previewhandleClick (testPreview) {
      // 点击预览按钮，展示弹出框
      this.testPreviewVisible = true
      // console.log(testPreview)
      this.testPreviewDate = testPreview
    },
    // 试题审核功能的实现
    checkHandleClick (questionsCheck) {
      // 点击审核按钮，展示弹出框
      this.checkDialogVisible = true
      // console.log(questionsCheck)
      this.questionCheckDate = questionsCheck
    },
    // 试题修改功能
    modifyHandleClick () {
      // 点击修改按钮，跳转试题录入页面
      this.$router.push('new')
    },
    // 试题上下架功能 
    async cancelHandleClick (publishStateItem) {
      // console.log(publishStateItem)
      // 根据id值判断试题是上架还是下架状态
      let publishStateId = publishStateItem.id
      let publishStates = publishStateItem.publishState
      let publishStateValue = publishStateItem.publishState === 1 ? '下架' : '上架'
      // 当用户点击下架按钮，弹框询问用户是否确认下架
      let confirmResult = await this.$confirm(`您确定${publishStateValue}这道题目吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') return this.$message.info(`已取消${publishStateValue}这道题目`)
      if (publishStates !== 1) {
        await choicePublish({
          id: publishStateId,
          publishState: 1
          })
          this.$message.success(`${publishStateValue}成功!`)
          publishStates = 1
          // 更新当前列表
          this.getChoiceList ()
      } else {
        await choicePublish({
          id: publishStateId,
          publishState: 0
          })
          this.$message.success(`${publishStateValue}成功!`)
          publishStates = 0
          // 更新当前列表
          this.getChoiceList ()
      }
    },
    // 删除试题功能的实现
    async deleteTestHandle (testItem) {
      // 根据id值删除对应的试题
      const testItemID = testItem.id
      // console.log(testItemID) // 打印出每道试题的id值
      // 弹框询问用户是否删除该道题目
      const confirmResult = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (confirmResult !== 'confirm') {
          return this.$message.info('已取消删除！')
        }
        await remove({id: testItemID})
        this.$message.success('删除成功！')
        this.getChoiceList ()
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if(this.requestParameters.page === 1) {
        this.getChoiceList(this.requestParameters)
      }
    },
    // 进入某一页--进入输入的当前页码
    handleCurrentChange (val) {
      // console.log(val)
      this.requestParameters.page === val
      this.getChoiceList()
    }
  },
  computed: {},
  mounted () {}
}
</script>

<style>
html,
body,
#app{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0; 
    min-width: 1366px;
}
.app-container {
  padding: 10px 3px;
}
</style>

<style scoped lang='less'>
.choice-container {
  padding: 0 10px;
    .btn-wrapper {
      margin-bottom: 15px;
      overflow: hidden;
      .suggestion {
        font-size: 12px;
        color: pink;
      }
    }
  }
  [class*=el-col-] {
    float: left;
  }
/deep/.el-dialog {
  .el-dialog__footer {
    text-align: right;
   }
}
</style>
